<template>
	<view class="conterBox">
		<view class="cont-box">
			<!-- tab栏  -->
			<view class="tab">
				<view class="tab-item" v-for=" (item,index) in category" :key="index"
					:class="{'active':isActive==index}" @click="chenked(item,index)">
					{{item.name}} （{{item.count}}）
				</view>
			</view>
			<view class="dynamicData" v-for=" (item,index) in dynamicList" :key="index">
				<view class="dynamDataHread">
					<view>
						<image :src="globalDataApi+item.avatar" class="dynamicTou"></image>
					</view>
					<view>
						<span class="dynamicChild">
							{{item.nickname}}
						</span>
						<view class="dynamicChildTime">
							{{item.edit_time}}
						</view>
					</view>
					<view>
						<image src="../../../static/codeImg/路径 719@2x.png" v-if="item.code==1" class="dynamicTou">
						</image>
					</view>
				</view>
				<view class="dynamInfo">
					{{item.title}}
				</view>
				<view class="dynamInfoIamge">
					<view v-for="(ite,ind) in item.images" :key="ind">
						<image :src="globalDataApi+ite" class="InfoIamge"></image>
					</view>
				</view>
				<view class="thumbsUp">
					<image src="../../../static/codeImg/点赞.png" class="thumbsUpimg"></image> {{item.is_like}}
				</view>
			</view>
		</view>
		<view class="cont-boxBootm"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalDataApi: 'http://zysj.oss-cn-guangzhou.aliyuncs.com',
				isActive: 0,
				category: [],
				dynamicList: [],
				id: "1"
			}
		},
		onLoad(option) {
			console.log("传参数据---------", option)
			// this.id = option.id
			this.getinit()
			this.getproper()
		},
		methods: {
			getinit() {
				this.$api('api/properties/commentTags', 'GET', {
					properties_id: this.id
				}).then(res => {
					let sunNum = 0
					res.data.map(item => {
						sunNum += item.count
					})
					let all = {
						add_time: "2024-08-24 13:10:28",
						count: sunNum,
						edit_time: "2024-08-24 13:10:28",
						id: "000",
						name: "全部"
					}
					this.category=[all,...res.data]
					// console.log(sunNum, "sunNum",this.category)
				})
			},
			getproper(id){
				let date={
					properties_id: this.id,
					tags_id:id
				}
				if(id=="000" || id== undefined){
					date={
						properties_id: this.id,
						
					}
				}
				this.$api('api/properties/commentList', 'GET',date).then(res => {
					this.dynamicList=res.data.data
					console.log("res----------",res.data.data)
				})
			},
			chenked(item,index) {
				console.log("点击数据",item.id, index);
				this.isActive = index;
				this.getproper(item.id)
			},
		}
	}
</script>

<style>
	.conterBox {
		width: 750rpx;
		/* height: 100vh; */
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.cont-box {
		width: 680rpx;
		height: 100%;
		margin: 20rpx auto;
	}

	.cont-boxBootm {
		width: 100%;
		height: 30rpx;
	}

	.tab {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.tab-item {
		width: 200rpx;
		height: 60rpx;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #2A2B2E;
		background: #F7F9F9;
		line-height: 60rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-right: 20rpx;
		margin-bottom: 16rpx;
	}

	.active {
		background: #FF5500;
		color: #FFFFFF;
	}

	.dynamicData {
		width: 100%;
		height: 490rpx;
		border-bottom: 1rpx solid #E5E5E5;
		margin-bottom: 24rpx;
	}

	.dynamDataHread {
		width: 100%;
		height: 76rpx;
		display: flex;
		justify-content: left;
		flex-wrap: nowrap;
		align-items: center;
	}

	.dynamDataHread view:nth-child(1) {
		width: 76rpx;
		height: 76rpx;
	}

	.dynamDataHread view:nth-child(2) {
		width: 530rpx;
		height: 76rpx;
		margin-left: 10rpx;
	}

	.dynamicChild {
		width: 530rpx;
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #2A2B2E;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.dynamicChildTime {
		margin-top: 5rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #777777;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.dynamDataHread view:nth-child(3) {
		width: 60rpx;
		height: 60rpx;
	}

	.dynamicTou {
		width: 100%;
		height: 100%;
	}

	.dynamInfo {
		width: 100%;
		margin: 26rpx auto 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #2A2B2E;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.dynamInfoIamge {
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* flex-wrap: nowrap; */
		align-items: center;
	}

	.InfoIamge {
		width: 218rpx;
		height: 222rpx;
	}

	.thumbsUp {
		width: 100rpx;
		height: 34rpx;
		float: right;
		margin-top: 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #777777;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.thumbsUpimg {
		width: 24rpx;
		height: 24rpx;
		margin-right: 6rpx;
	}
</style>
